<template>
  <a-drawer
    title="详情"
    placement="right"
    width="40%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @close="handleCancel"
  >
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col>
          <a-form-item label="异常情况说明">
            <a-select
              showSearch
              :allowClear="true"
              placeholder="请选择"
              v-model="queryParam.description"
              @change="changeDescription"
              :options="descriptionList"
              style="width: 200px"
            >
            </a-select>
            <a-button @click="submit">
              提交
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-spin :spinning="confirmLoading">
      <a-table
        :pagination="false"
        :columns="columns"
        :dataSource="checkList"
        :rowKey="row=>row.checkTime"
        :bordered="true"
        style="margin-top:8px"
      >
      </a-table>
      <!--
              :pagination="false"-->
      <!--      <v-table-->
      <!--        :table-column="columns"-->
      <!--        :data="loadData"-->
      <!--        :rowKey="record => record.id"-->
      <!--        bordered-->
      <!--        ref="table"-->
      <!--        style="margin-top:8px"-->
      <!--      >-->
      <!--      </v-table>-->
    </a-spin>
  </a-drawer>

</template>

<script>
import {getInfoByStudentId, listDescription, processAlarm} from "@api/wfuAlarm/wfuAlarm";

export default {
  name: 'processAlarmDetail',
  components: {},
  data() {
    return {
      visible: false,
      confirmLoading: false,
      columns: [
        // {
        //   title: '打卡时间',
        //   field: 'checkTime',
        // },
        // {
        //   title: '打卡地点',
        //   field: 'deviceGroup',
        // },
        {
          title: '打卡时间',
          dataIndex: 'checkTime',
          key: 'checkTime',
          width: '50%'
        },
        {
          title: '打卡地点',
          dataIndex: 'deviceGroup',
          key: 'deviceGroup',
          width: '50%'
        },
      ],
      queryParam: {},
      descriptionList: [],
      checkList: [{
        checkTime: '',
        deviceGroup: '',
      }],
      loadData: parameter => {
        return getInfoByStudentId(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          return res.data
        })
      },
    }
  },
  watch: {
    '$route'() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      listDescription().then(res => {
        this.descriptionList = res.data
      })
      getInfoByStudentId(this.queryParam).then(res => {
        this.checkList = res.data
      })
    },
    show(queryParam) {
      this.visible = true
      this.confirmLoading = false
      this.queryParam = queryParam
      this.queryParam.description = undefined
      this.init()
    },
    handleCancel() {
      this.visible = false
    },
    submit() {
      return processAlarm(this.queryParam).then(res => {
        if (res.code === 0) {
          /*页面回调*/
          // this.queryParam.studentId = undefined
          this.visible = false
          this.$emit('ok')
        } else {
          alert("提交失败")
        }
      })
    },
    changeDescription(e) {
      this.queryParam.description = e
    }
  }
}
</script>

<style scoped>

</style>
